<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>unslider演示</title>
<script src="../easyui/jquery.min.js"></script>
<script src="../js/unslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/unslider.css">
</head>

<body>
<!-- example_03 begin -->

<h2>示例 3</h2>

<span>在上一步的基础上，加上圆点（指示器）。这里使用 CSS3 来添加，若要兼容 IE8 及以下，请使用图片背景添加。</span>

<div class="banner" id="b03">

    <ul>

        <li><img src="http://tpopro.b0.upaiyun.com/classimg/chuji.png" alt="" width="640" height="480" ></li>

        <li><img src="http://tpopro.b0.upaiyun.com/classimg/zhongji.png" alt="" width="640" height="480" ></li>

        <li><img src="http://tpopro.b0.upaiyun.com/classimg/lishi.png" alt="" width="640" height="480" ></li>

        <li><img src="http://tpopro.b0.upaiyun.com/classimg/gaoji.png" alt="" width="640" height="480" ></li>

    </ul>

</div>
<div id="cc">aaabbbccc</div>

<a class="mm" href="javascript:void(0);" data="c1.html">c1</a>
<a class="mm" href="javascript:void(0);" data="c2.html">c2</a>

<script>

$(function($){
	$('#b03').unslider({
	  dots: true
	});
	$(".mm").click(function(){
		$("#cc").load($(this).attr("data"));
	});
	
})

</script>

<!-- example_03 end -->


</body>

</html>

